<script lang="ts" setup>
	import utils from '@/utils'
	// Import Swiper Vue.js components
	import { Swiper, SwiperSlide } from 'swiper/vue'
	// Import Swiper styles
	import 'swiper/css'

	import 'swiper/css/pagination'
	import 'swiper/css/navigation'

	import { Autoplay, Navigation, Pagination } from 'swiper/modules'

	const modules = [Autoplay, Pagination, Navigation]
	const productList = [{
		name: 'EA系列',
		series: 'EA',
		text: 'EA系列产品的目标是让更多的人能够体验到协作机器人的便利与高效。我们希望机器人的智慧和技能可以帮助他们节省时间，提高工作效率。',
		img: 'product/t1.png',
	}, {
		name: 'CS防爆系列',
		series: 'CS',
		text: '以多重防爆功能为主打的CS防爆系列协作机器人，成功颠覆了传统机器人工作环境的局限，CS防爆系列协作机器人都能应对自如，保持高效运行。',
		img: 'product/t2.png',
	}, {
		name: 'CSF力控系列',
		series: 'CSF',
		text: '致力于探索人机共融的可能性，提供更优的解决方案。它们组合了先进的机械系统、创新的编程技术和精细的传感器技术，从而实现对环境敏锐的感知和精确的操作。',
		img: 'product/t3.png',
	}, {
		name: 'CSA先进系列',
		series: 'CSA',
		text: '采用最尖端的科技和创新设计，集成优秀的工程制造技术、独特的软硬件设计和丰富的人机交互功能，力求为用户提供最全面、最前沿的服务体验。',
		img: 'product/t4.png',
	}, {
		name: 'CSR回转体系列',
		series: 'CSR',
		text: '专为螺丝锁付应用而设计的高效工具，为我们在生产线上提供无与伦比的便利。含有先进旋转驱动和精确控制系统的回转体设计，使机器人对螺丝锁付的处理显得得心应手。',
		img: 'product/t5.png',
	}, {
		name: 'CSH地平线系列',
		series: 'CSH',
		text: '通过先进的控制系统和创新的机械设计，它们能够灵活地处理各种形状和尺寸的包裹，以最高效的方式进行精确的堆垛工作。',
		img: 'product/t6.png',
	}]
	const swiperOption = {
		loop: true,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		pagination: {
			clickable: true,
		},
	}
</script>

<template>
	<Swiper :space-between="30" :centered-slides="true" :rewind="true" :modules="modules" v-bind="swiperOption"
		class="mySwiper" :style="{
      '--swiper-navigation-color': '#1677ff',
	  '--swiper-pagination-bottom': '20px'
    }">
		<SwiperSlide v-for="(item, index) in productList" :key="index">
			<div class="swiper-item">
				<div class="swiper-item-left">
					<div class="title">
						{{ item.name }}
					</div>
					<div class="text">
						{{ item.text }}
					</div>
					<div class="btn-box">
						查看产品
					</div>
				</div>
				<div class="swiper-item-right">
					<div class="series">{{item.series}}</div>
					<img :src="utils.getImg(item.img)" class="img">
				</div>
			</div>
		</SwiperSlide>
	</Swiper>
</template>

<style lang="scss" scoped>
	.mySwiper {
		width: 1280px;
		padding: 150px 0 80px 0;

		.swiper-item {
			width: 1180px;
			margin: 0 auto;
			display: flex;
			justify-content: space-around;

			.swiper-item-left {
				width: 420px;
				padding-top: 60px;

				.title {
					font-size: 38px;
					font-weight: bold;
				}

				.text {
					margin-top: 25px;
					color: #495770;
					line-height: 25px;
					font-size: 18px;
				}

				.btn-box {
					margin-top: 40px;
					color: #495770;
					cursor: pointer;
					text-decoration: underline;
				}
			}

			.swiper-item-right {
				position: relative;

				.series {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					font-size: 200px;
					font-weight: bold;
					z-index: -1;
					background: linear-gradient(180deg, #F2F1F3 31.51%, rgba(242, 241, 243, 0.00) 76.73%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.img {
					width: 600px;
				}
			}
		}
	}

	.swiper-slide {
		font-size: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>